<xsl:stylesheet 
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0"
	xmlns:xs="http://www.w3.org/2001/XMLSchema">
    <xsl:output method="html" encoding="UTF-8" 
		doctype-system="http://www.w3.org/TR/html4/strict.dtd" 
		doctype-public="-//W3C//DTD HTML 4.01//EN" indent="yes" />

    <xsl:template match="/">
		<html xmlns="http://www.w3.org/1999/xhtml">
			<head>
				<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
				<title>Articles</title>
				<link rel="stylesheet" type="text/css" href="data.css" /> 
				<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
	    	</head>
	   		<body>
				<xsl:apply-templates select="result/contents" />
	    	</body>
    	</html>
    </xsl:template>
    
    
    <xsl:template match="contents">   
    		<h1>Articles</h1>
    		<xsl:value-of select="content[@date]"></xsl:value-of>
    		<div class="articleContainer">
    			<xsl:for-each select="content" >
    				<!-- Must convert to legal dateTime format -->
    				<xsl:variable name="date1" 
    					select="concat(replace(@timestamp, ' ', 'T'),':00')" />
    					
    				<xsl:apply-templates select="contentdata">
    					<xsl:with-param name="articleDate" 
    						as="xs:dateTime" 
    						select="xs:dateTime($date1)" />
    													
    					<xsl:with-param name="articleKey" select="@key" />
    				</xsl:apply-templates>
    			</xsl:for-each>
    		</div>
    </xsl:template>
    
    <xsl:template match="contentdata">
	    <xsl:param name="articleDate" as="xs:dateTime" required="yes"/>
	    <xsl:param name="articleKey" />   
	        
   		<div class="articleHeading"> 
    		<xsl:value-of select="heading"/>
    	</div>
    	<div class="articlePreface">
    		<div class="articleDate">
   				<xsl:value-of select="format-dateTime($articleDate,'[M01]/[D01]/[Y0001] [H01]:[m01]')"/>
    		</div> 
    		<xsl:value-of select="preface" />
    	</div>
    	<div class="articleText hidden" id="{$articleKey}">
    		<xsl:apply-templates select="text" />
    	</div>
    	<a id="show{$articleKey}" class="articleReadMoreorLess" title="Read more">Read more >></a>
    	<a id="hide{$articleKey}" class="articleReadMoreorLess hidden" title="Read less">Read less >> </a>
    	<script>
    		$(document).ready(function(){
				$("#show<xsl:value-of select="$articleKey" />").click(function(event){
	     			$("#<xsl:value-of select="$articleKey" />").slideDown();
	     			$("#<xsl:value-of select="$articleKey" />").removeClass("hidden");
	     			$("#hide<xsl:value-of select="$articleKey" />").removeClass("hidden");
	     			$("#show<xsl:value-of select="$articleKey" />").addClass("hidden");	 
     			});
				$("#hide<xsl:value-of select="$articleKey" />").click(function(event){
	     			$("#<xsl:value-of select="$articleKey" />").slideUp();
	     			$("#<xsl:value-of select="$articleKey" />").addClass("hidden");
	     			$("#hide<xsl:value-of select="$articleKey" />").addClass("hidden");
	     			$("#show<xsl:value-of select="$articleKey" />").removeClass("hidden");	     			
     			});     			
		   	});
    	</script>
    </xsl:template>
    
    <xsl:template match="text">
    	<xsl:value-of select="." />
    </xsl:template>

</xsl:stylesheet>